<template>
  <div class="common-layout">
    <el-container direction="vertical">
      <TopNav />
      <el-main class="app-main">
        <RouterView />
      </el-main>
    </el-container>
  </div>
  
</template>

<script>
import TopNav from '@/components/top_nav.vue'
export default {
  name: 'App',
  components: { TopNav }
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html, body{
    height: 100vh;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
  }
  #app{
    height: 100vh;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  :root{
    --bg: #f6f8fb;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --text: #0f172a;
    --muted: #6b7280;
    --border: #e5e7eb;
    --accent: #3d55ec; /* 与你已设置的 hover 蓝色一致 */
    --accent-2: #7b8cff;
    --active: #ff932f; /* 与你已设置的激活橙色一致 */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
    --header-height: 60px;
  }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  }

  /* 强制隐藏所有可能的滚动条 */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  #app::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
  }
  
  /* 禁用所有滚动行为 */
  html, body, #app {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .common-layout{
    height: 100vh;
    width: 100%;
    background: var(--bg);
    overflow: hidden !important;
    position: relative;
  }
  .el-container{
    height: 100vh;
    width: 100%;
    overflow: hidden !important;
    box-sizing: border-box;
    position: relative;
    direction: "vertical"
  }

  .top-nav{
    height: var(--header-height);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .nav-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .brand{
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .3px;
    cursor: pointer;
    padding-left: 4px;
  }

  .top-menu{
    border-bottom: none;
    background: transparent;
  }

  .app-main{
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bg);
    height: calc(100vh - var(--header-height)) !important;
    max-height: calc(100vh - var(--header-height)) !important;
    overflow: hidden !important;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
</style>
